<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 200px;
				height: 200px;
			}
			#as{
				position: absolute;
				right: 0;
				top: 0;
				width: 100px;
				height: 30px;
				border: 1px solid black;
				border-radius:10px ;
				line-height: 30px;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="as">
			购物车
		</div>
		<ul class="list">
		</ul>
		<script src="cookie.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var carts = document.getElementById('as');
			        var xkl2 = new XMLHttpRequest();
					var url ="http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=10&pagenum=1";
					console.log(url);
					xkl2.open('get',url);
			        xkl2.send(null);
				    xkl2.onload = function(){
				    if(xkl2.status == 200){
					console.log(xkl2.responseText);
					var obj = JSON.parse(xkl2.responseText);
					console.log(obj.data);
			       var html = '';
				   for(var i = 0; i < obj.data.length; i++) {
						var productObj = obj.data[i];
						console.log(productObj);
						html += `
					<li>
						<a aid="${productObj.pid}" class='crf' href='productList.html?${productObj.pid}'><h2>${productObj.pname}</h2></a>
						<img src="${productObj.pimg}"/>
						<p>${productObj.pprice}</p>
						<input class='dtn' idnum='${productObj.pid}' type="button" value="加入购物车">
					</li>		
					`;
					}
				   var dacar = "productObj.pid"+"productObj.pimg"+"productObj.pprice"+"productObj.pname";
				   var list = document.querySelector('.list');
				   list.innerHTML += html;
				  }
				    var car = document.querySelectorAll('.dtn');
				    var dic = document.getElementById('as');
				    window.onscroll = function(){
				    	 dic.style.top = document.documentElement.scrollTop+'px';
				    }
			       
				    console.log(car);
					for(var n = 0;n<car.length;n++)
					{
						car[n].onclick=function(){
							    var aid2 = this.getAttribute('idnum');
							    console.log(aid2);
								var xkl4 = new XMLHttpRequest();
						        var url =`http://jx.xuzhixiang.top/ap/api/add-product.php?uid=1&pid=${aid2}&pnum=1`;
						        xkl4.open('get',url);
						        xkl4.send(null);
							    xkl4.onload = function(){
							    if(xkl4.status == 200){
								console.log(xkl4.responseText);
								var obj1 = JSON.parse(xkl4.responseText);
							    console.log(obj1);
						 }
					   }
					 }
				   
					}
					carts.onclick = function(){
				   location.href = 'shoppingcar.html';
			}
				}
				    
		</script>
	</body>
</html>
